<template>
  <jy-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-input v-model="filterText" placeholder="请输入检测依据" clearable size="small" prefix-icon="el-icon-search" />
    <el-tree
      class="dialog-tree"
      v-loading="loading"
      :data="dataList"
      show-checkbox
      default-expand-all
      node-key="jiancyjId"
      ref="tree"
      highlight-current
      :props="defaultProps"
      :check-strictly="true"
      :filter-node-method="filterNode"
    >
      <div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label" v-text="node.label"></div>
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      <el-button size="small" @click="cancel">取 消</el-button>
    </div>
  </jy-dialog>
</template>
<script>
import { listBsJiancyj } from "@/api/sycs/bsJiancyj";
import { mapGetters } from "vuex";
export default {
  name: "BsJiancyjView",
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["deptId"])
  },
  props: {
    syType: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      title: "检测依据",
      loading: false,
      open: false,
      ids: undefined,
      dataList: [],
      filterText: "",
      defaultProps: {
        children: "children",
        label: "jiancyj"
      }
    };
  },
  watch: {
    // 根据名称筛选树
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {},
  mounted() {},
  methods: {
    init(ids) {
      this.ids = ids;
      this.open = true;
      this.getList();
    },
    /** 查询检测依据列表 */
    getList() {
      this.loading = true;
      const queryParams = {
        deptId: this.deptId,
        syTypeId: this.syType
      };
      listBsJiancyj(queryParams).then((response) => {
        this.dataList = response.rows;
        this.loading = false;
        this.$nextTick(() => {
          if (this.ids) {
            this.$refs.tree.setCheckedKeys(this.ids.split(","));
          }
        });
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.jiancyj.indexOf(value) !== -1;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.filterText = "";
      this.$refs.tree.setCheckedKeys([]);
    },
    submitForm() {
      const arr = this.$refs.tree.getCheckedNodes();
      if (!arr || arr.length <= 0) {
        this.$message.warning("请选择检测依据");
        return;
      }
      const ids = arr.map((item) => item.jiancyjId);
      const label = arr.map((item) => `${item.jiancyj}`);
      this.$emit("select", { label: label.join("、"), ids: ids.join(",") });
      this.cancel();
    }
  }
};
</script>
<style lang="scss" scoped></style>
